<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="query">
      质控类型：
      <el-select
        v-model="query.qcLevel"
        placeholder=""
        size="mini"
        @change="getQX"
      >
        <el-option label="一级质控流程" :value="1"> </el-option>
        <!-- <el-option label="三级质控流程" :value="2"> </el-option> -->
        <el-option label="三级质控流程" :value="4"> </el-option>
      </el-select>
      <!-- 科室：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select> -->
      <el-button
        plain
        size="mini"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList"
        :disabled="userQX.查询"
        >查询</el-button
      >
      <el-button
        plain
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="open_dialog('新增')"
        :disabled="userQX.新增"
        >新增</el-button
      >
      <el-button
        plain
        size="mini"
        icon="el-icon-edit"
        type="primary"
        @click="open_dialog('修改')"
        :disabled="userQX.修改"
        >修改</el-button
      >
      <el-button
        plain
        size="mini"
        icon="el-icon-delete"
        type="danger"
        @click="del_row"
        :disabled="userQX.删除"
        >删除</el-button
      >
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column
          prop="CheckGroupSectionName"
          label="部门名称"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="Name" label="检查组名称" align="center">
        </el-table-column>
        <el-table-column prop="ManagerName" label="组长" align="center">
        </el-table-column>
        <el-table-column prop="Members" label="组员" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange_page"
        :current-page="query.CurrentPage"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      >
      </el-pagination>
    </div>
    <!-- 弹层 -->
    <el-dialog
      :title="dialog_title"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <table border="1" style="width: 100%" v-if="dialogVisible">
        <tr>
          <td class="tac">质控等级：</td>
          <td>
            <el-select
              v-model="form.QcLevel"
              placeholder=""
              size="mini"
              style="width: 100%"
              @change="Level_change"
            >
              <el-option label="一级质控" :value="1"> </el-option>
              <!-- <el-option label="二级质控" :value="2"> </el-option> -->
              <el-option label="二级质控" :value="4"> </el-option>
              <!-- <el-option label="一级、二级质控" :value="3"> </el-option>
              <el-option label="一级、三级质控" :value="5"> </el-option>
              <el-option label="二级、三级质控" :value="6"> </el-option>
              <el-option label="一级、二级、三级质控" :value="7"> </el-option> -->
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="tac">检查组名称：</td>
          <td><el-input size="mini" v-model="form.Name"></el-input></td>
        </tr>
        <tr>
          <td class="tac">科室名称：</td>
          <td>
            <el-input
              size="mini"
              v-model="form.CheckGroupSectionName"
            ></el-input>
          </td>
        </tr>
        <!-- <tr>
          <td class="tac">备注：</td>
          <td>
            <el-input type="textarea" :rows="6" v-model="form.备注"></el-input>
          </td>
        </tr> -->
        <tr>
          <td class="tac">人员：</td>
          <td colspan="3">
            <table border="1" cellspacing="0" style="width: 100%">
              <tr>
                <th class="tac">姓名</th>
                <th class="tac">操作</th>
              </tr>
              <tr v-for="(item, index) in form.Users" :key="index">
                <td>
                  <el-select
                    v-model="item.UserId"
                    filterable
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      :label="item.Name + '-' + item.Loginno"
                      :value="item.UserId + ''"
                      v-for="(item, index) in userList"
                      :key="index"
                    >
                    </el-option>
                  </el-select>
                </td>
                <td>
                  <el-button @click="form.Users.splice(index, 1)"
                    >删除</el-button
                  >
                  <el-select
                    v-model="item.UserTyoe"
                    filterable
                    placeholder="请选择"
                    style="width: 80px"
                  >
                    <el-option label="组长" value="1"> </el-option>
                    <el-option label="组员" value="2"> </el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <el-button
                    style="width: 100%"
                    size="small"
                    @click="form.Users.push({ UserId: '', UserTyoe: '2' })"
                    >添加一行</el-button
                  >
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="add_users" size="mini"
          >填充护士长</el-button
        >
        <el-button @click="handleClose" size="mini">关 闭</el-button>
        <el-button type="primary" @click="btn_ok" size="mini">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {
        CurrentPage: 1,
        pageSize: 10,
        total: 0,
        qcLevel: 1,
      },
      tableData: [],
      dialogVisible: false,
      dialog_title: "",
      row_info: null,
      form: { Users: [] },
      userList: [],
      userQX: {},
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    // this.getUserList();
    // this.getList();
    this.getQX();
  },
  methods: {
    getQX() {
      this.$get(
        "/Task/GetPermission/" + this.query.qcLevel + "/质控人员设置"
      ).then((res) => {
        var list = res.Data;
        var data = {
          查询: true,
          新增: true,
          修改: true,
          删除: true,
        };
        for (var item in list) {
          console.log(item);
          if (list[item] == "查看") {
            data.查询 = false;
            this.getList();
            this.getUserList();
          }
          if (list[item] == "新增") {
            data.新增 = false;
          }
          if (list[item] == "编辑") {
            data.修改 = false;
          }
          if (list[item] == "删除") {
            data.删除 = false;
          }
        }
        this.userQX = data;
        console.log(data);
      });
    },
    getList() {
      this.$post("/CheckGroup/GetPageList", this.query).then((res) => {
        this.tableData = res.Data.PageList;
        this.query.total = res.Data.Total;
      });
    },
    getUserList() {
      this.$post("/Bs/GetAllUserList").then((res) => {
        this.userList = res.Data;
      });
    },
    Level_change(val) {
      this.$post("/Bs/GetAllUserList?qcLevel=" + val).then((res) => {
        this.userList = res.Data;
      });
    },
    open_windo(url) {
      window.open(url);
    },
    row_click(row) {
      if (!row) {
        this.row_info = null;
        return;
      }
      this.row_info = row;
    },
    del_row() {
      this.$get("/CheckGroup/SoftDelete/" + this.row_info.Id).then((res) => {
        this.getList();
      });
    },
    handleClose() {
      this.form = { Users: [] };
      this.dialogVisible = false;
    },
    btn_ok() {
      var that = this;
      for (var i in that.form.Users) {
        for (var j in that.userList) {
          if (that.form.Users[i].UserId == that.userList[j].UserId) {
            that.form.Users[i].UserName = that.userList[j].Name;
          }
        }
      }
      console.log(this.form);
      // this.form
      var url = this.form.Id
        ? "/CheckGroup/UpdateNew"
        : "/CheckGroup/CreateNew";
      if (this.form.Id) {
        this.$put(url, this.form).then((res) => {
          this.getList();
          this.handleClose();
        });
      } else {
        this.$post(url, this.form).then((res) => {
          this.getList();
          this.handleClose();
        });
      }
    },
    open_dialog(val) {
      this.dialog_title = val + "质控人员";
      if (val == "新增") {
        this.dialogVisible = true;
        return;
      }
      if (val == "修改" && this.row_info) {
        this.$get("/CheckGroup/GetOneNew/" + this.row_info.Id).then((res) => {
          this.form = res.Data;
          // for (var i in this.form.Users) {
          //   this.form.Users[i].UserId = this.form.Users[i].UserId * 1;
          // }
          this.Level_change(this.form.QcLevel);
          this.dialogVisible = true;
          return;
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据后操作！",
        });
        return;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
    },
    handleCurrentChange_page(val) {
      this.query.CurrentPage = val;
      this.getList();
    },
    add_users() {
      this.$get("/CheckGroup/GetHlRoleIds").then((res) => {
        for (var i in res.Data) {
          this.form.Users.push({
            UserId: res.Data[i] + "",
            UserTyoe: "2",
          });
        }
        console.log(this.form);
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000 !important;
}
</style>